<template>
	<div class="app-body">
		<add-item :addItem="addItem" @my-event="onMyEvent"></add-item>
		<show-item :items="uncompletedItems" :on-delete="onDelete" :toogle-item="toogleItem" title="未完成"></show-item>
		<show-item :items="completedItems" :on-delete="onDelete" :toogle-item="toogleItem" title="已完成"></show-item>
		
		<navigation-link :list="todolist">
      <template slot-scope="{todo}">
        <span v-if="todo.id==1">mm</span>
        {{todo.text}}
      </template>
			
		</navigation-link>
	</div>
</template>

<script>
import AddItem from "./view/AddToDo.vue";
import ShowItem from "./view/ShowToDo.vue";

import NavigationLink from "./slot/navigation-link.vue";

import { mapMutations, mapGetters } from "vuex";

export default {
  data() {
    return {
      todolist: [
        {
          text: "aaa",
          id: 1
        },
        {
          text: "bbb",
          id: 2
        }
      ]
    };
  },
  methods: {
    ...mapMutations({
      addItem: "addTodo",
      onDelete: "deleteTodo",
      toogleItem: "toogleTodo"
    }),
    onMyEvent(arg) {
      console.log(arg);
    }
  },
  computed: {
    ...mapGetters({
      todos: "todos"
    }),
    completedItems() {
      return this.todos.filter(item => item.completed);
    },
    uncompletedItems() {
      return this.todos.filter(item => !item.completed);
    }
  },
  components: {
    "add-item": AddItem,
    "show-item": ShowItem,
    "navigation-link": NavigationLink
  }
};
</script>

<style lang="less" scoped>
.app-body {
  .item-list {
    width: 600px;
    margin: 0 auto;
  }
}
</style>

